// components/placeImage/index.js
Component({
  /**
   * 组件的属性列表
   */
  externalClasses: ['image-class','error-image-class','custom-class'],
  properties: {
    height:{
      type:String,
      value:'100%'
    },
    // fill ,none ,cover ,contain
    fit:{
      type:String,
      value:'fill'
    },
    width:{
      type:String,
      value:'100%'
    },
    minHeight:{
      type: String,
      value:'520rpx'
    },
    src:{
      type:String,
      value:''
    },
    radius:{
      type:String | Number,
      value:0
    },
    placeImageSrc:{
      type:String,
      value:"../../static/img/place_image.png"
    },
    errorImageSrc: {
      type: String,
      value: "../../static/img/error_image.jpg"
    },
    // loading | image | progress
    placeType:{
      type:String,
      value:'loading'
    },
    placeBgColor:{
      type:String,
      value:null
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    progressValue:0,
    timeInterval:Object,
  },

  /**
   * 组件的方法列表
   */
  ready(){
    const _this = this 
    if (this.data.placeType === 'progress'){
      this.data.timeInterval = setInterval(function () {
       
        if (_this.data.progressValue < 90) {
          _this.data.progressValue += Math.random() * 100 / 7;
    
        } else {

          _this.data.progressValue += 0.1

        }
        if (_this.data.progressValue >= 99){
          _this.data.progressValue = 99
        }
        const result = Number(_this.data.progressValue.toString().match(/^\d+(?:\.\d{0,2})?/))   
        _this.setData({
          progressValue: result
        })
      }, 200);
    }

  },

  methods: {
    errorLoad(e){
      clearInterval(this.data.timeInterval);
    },

    imageLoad(e){
      if (this.data.placeType === 'progress'){
        this.setData({
          progressValue: 100
        })
        clearInterval(this.data.timeInterval);
      }
      this.triggerEvent('load', e.detail, {})
    }
  }
})
